<template>
  <div class="box">
    <el-form size="medium"  ref="itemForm" label-width="100px">
      <el-form-item label="订单编号" style="color:#606266;">
        {{comment.order_no}}
      </el-form-item>

      <!-- <el-form-item label="商品">
        <router-link tag="a" target="_blank" :to="{path:'/product/item',query:{id:125}}" style="margin-left:10px">
          <el-link>商品名称</el-link>
        </router-link>
      </el-form-item> -->
      <el-form-item label="商品" style="color:#606266;">
        {{comment.name}}
      </el-form-item>

      <el-form-item label="评论分数" style="color:#606266;">
        <el-rate
          v-model="comment.score_value"
          disabled>
        </el-rate>
      </el-form-item>

      <el-form-item label="评论内容" style="color:#606266;">
        {{comment.content}}
      </el-form-item>
      
      <el-form-item label="评论图片" v-if="comment.img_url.length">
        <div class="pics">
          <div class="pic" v-for="(item,i) in comment.img_url" :key="i">
            <a :href="item" target="_blank">
            <vimage
            style="width: 80px; height: 80px;"
            :src="item"
            fit="fill"></vimage>
            </a>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="评论人" style="color:#606266;">
        {{comment.nickname}}
      </el-form-item>

      <el-form-item label="审核结果">
        <el-radio-group v-model="comment.state">
          <el-radio :label="2">通过</el-radio>
          <el-radio :label="3">驳回</el-radio>   
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="comment.remake" type="textarea" rows="4" placeholder="请输入审核备注"></el-input>
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="saveData">保存数据</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import { auditComment } from '@/api/shop/comment';
export default {
  name: 'commentAudit',
  data() {
    return {
      isLoading: false
    }
  },
  watch:{},
  props: {
    comment:{
      type:Object,
      default:function(){
        return {};
      }
    }
  },
  methods: {
    //保存数据(修改发货地址)
    saveData(){
      this.$confirm('是否要审核该评论?').then(_ => {
        this.isLoading = true;
        auditComment({
          id:this.comment.id,
          state:this.comment.state,
          remake:this.comment.remake
        }).then(res => {
          this.isLoading = false;
          this.$emit('success');
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    }
  }
}
</script>

<style lang="scss" scoped>
//覆盖分数样式以水平对齐
.el-rate{
  display: inline-block;
  vertical-align: middle;
}

.box{
  padding-right: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.el-form-item{
  margin-bottom:15px;
}

.pics{
  display: flex;
  flex-wrap: wrap;

  .pic{
    width: 80px;
    height: 80px;
    border: 1px solid #EBEEF5;
    margin-right: 10px;
    margin-top: 10px;
  }
}
</style>
